<template>
  <div id="authnewindex1">
    <div class="left">
      <h3 class="ah3">角色树</h3>
      <div class="juese">
        <div
          v-for="(i, k) in jss"
          :key="i.roleId"
          class="juesheshu"
          @click="btn_jss(i, k)"
          :class="{ dynamic_clacss: k == dynamicClass }"
        >
          {{ i.name }}
        </div>
      </div>
    </div>

    <div class="right">
      <div class="top">
        <div class="saixuna"></div>
        <div class="btn">
          <el-button
            type="primary"
            class="btn_anliu"
            size="small"
            @click="handleRole('edit')"
            >编辑角色</el-button
          >
          <el-button
            type="primary"
            size="small"
            class="btn_anliu"
            @click="handleRole('add')"
            >添加角色</el-button
          >
          <el-button
            type="primary"
            size="small"
            class="btn_anliu"
            @click="que1tin"
            >确认授权</el-button
          >
        </div>
      </div>
      <div class="tables">
        <div class="caidan_list">
          <el-transfer
            v-model="value"
            :titles="['未授权', '已授权']"
            :data="menuTableData"
            :button-texts="['到左边', '到右边']"
            @change="transfer_btn"
            :props="{
              key: 'cdid',
              label: 'remark',
            }"
          ></el-transfer>
        </div>
      </div>
    </div>

    <!-- 新增角色弹出框 -->
    <el-dialog
      :title="modelPopup.titleName"
      append-to-body
      :visible.sync="modelPopup.roleState"
      class="addDialog"
      :class="{ bianjijusehe: modelPopup.titleName != '编辑角色' }"
      width="1000"
      center
    >
      <el-form label-width="100px" rel="roleForm" :model="editForm">
        <div v-for="(item, index) in editForm.children" :key="index">
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="角色名称："
                :prop="'children.' + index + '.name'"
                :rules="[{ required: true, message: '角色名称不能为空' }]"
              >
                <el-input v-model="item.name" autocomplete="off" :disabled="item.fixed"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="角色排序："
                :prop="'children.' + index + '.paixu'"
                :rules="[{ required: true, message: '角色排序不能为空' }]"
              >
                <el-input v-model="item.paixu" autocomplete="off" :disabled="item.fixed"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="角色状态："
                :prop="'children.' + index + '.state'"
                :rules="[{ required: true, message: '角色状态不能为空' }]"
              >
                <el-radio v-model="item.state" label="停用" :disabled="item.fixed">停用</el-radio>
                <el-radio v-model="item.state" label="启用" :disabled="item.fixed">启用</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!-- 按钮 -->
        <div style="text-align: right; margin-top: 20px">
          <el-button @click="modelPopup.roleState = false">取消</el-button>
          <el-button type="primary" @click="submitRoleForm('roleForm')"
            >确认
          </el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: [],
      treeData: [], 
      modelPopup: {
        roleState: false, 
        titleName: '', 
        authState: false, 
      },
      roleId: '',
      jss: [],
      dynamicClass: 0,
      selection: null,
      tableData: [],
      editForm: {
        children: [],
      },
      menuTableData: [],
    }
  },
  created() {
    this.apiTreeData()
  },
  mounted() {
    this.$nextTick(() => {
      let checkbox = document.getElementsByClassName('el-checkbox__label')
      checkbox[0].style.color = '#f56c6c'
      checkbox[1].style.color = '#67c23a'
    })
  },
  methods: {
    // 编辑角色
    submitRoleForm(formName) {
      this.editForm.children.forEach(item=>{
        item.dqzt = item.state=='启用'?true:false
      })
      
      if(this.modelPopup.titleName == '编辑角色'){
        this.$axios
        .post('/communal/role/editRole', this.editForm)
        .then((res) => {
          if (res==true) {
            this.modelPopup.roleState = false
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
            this.apiTreeData()
          }
        })
      }else{
        this.$axios
        .post('/communal/role/addRole', this.editForm.children[0])
        .then((res) => {
          if (res==true) {
            this.modelPopup.roleState = false
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
            this.apiTreeData()
          }
        })
      }
    },
    // 编辑/新增弹窗
    handleRole(item) {
      this.modelPopup.roleState = true
      if (item === 'add') {
        this.modelPopup.titleName = '新增角色'
        this.editForm.children = [{ name: '', paixu: '', dqzt: '', state: '启用' }]
      } else {
        this.modelPopup.titleName = '编辑角色'
        this.apiTreeData()
      }
    },
    // 获取角色树
    apiTreeData() {
      this.$axios.get('/communal/role/getList').then((res) => {
        if (res) {
          this.treeData = res
          this.jss = res
          this.roleId = res[0].roleId
          this.editForm.children = []
          res.forEach(item=>{
            let obj = {
              jsid: item.roleId,
              name: item.name,
              paixu: item.paixu,
              dqzt: item.dqzt,
              state: item.dqzt?'启用':'停用',
              fixed: item.fixed
            }
            this.editForm.children.push(obj)
          })
          this.as_cd_list()
        }
      })
    },
    // 获取菜单树
    as_cd_list() {
      this.$axios.get('communal/role/menus/' + this.roleId).then((rs) => {
        if (rs) {
          this.menuTableData = rs.unauthed
          this.value = []
          rs.authed.forEach(item=>{
            this.value.push(item.cdid)
          })
        }
      })
    },
    // 确认授权
    que1tin() {
      let postData = {
        cdids: this.selection==null?this.value:this.selection,
        jsid: this.roleId,
      }
      this.$axios.post('/communal/role/addmenu', postData).then((res) => {
        if (res==true) {
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        }
      })
    },
    // 到左边、到右边
    transfer_btn(selection) {
      this.selection = selection
    },
    // 角色树点击
    btn_jss(e, k) {
      this.dynamicClass = k
      this.roleId = e.roleId
      this.as_cd_list()
    }
  },
}
</script>

<style lang='scss' scoped>
#authnewindex1 {
 ::v-deep.el-transfer {
    width: 100%;
    height: 100%;
    .el-transfer-panel {
      width: calc((100% - 290px) / 2);
      height: 100%;
      .el-transfer-panel__body {
        height: 100%;
      }
      .el-transfer-panel__item {
        margin-top: 10px;
        margin-bottom: 10px;
      }
      .el-checkbox-group {
        height: 100%;
      }
    }
    .el-transfer__buttons {
      display: inline-block;
     
    }
  }
  margin-left: 20px;
 ::v-deep .el-dialog__title {
    font-weight: bold;
  }
  .authDialog {
    margin-top: 15vh;
  }
  .addDialog {
    margin-top: 1.5vh;
   ::v-deep.el-dialog {
      margin-top: 0vh !important;
    }
  }
  .bianjijusehe {
   ::v-deep.el-dialog {
      margin-top: 30vh !important;
    }
  }

  padding: 20px 0px 20px 10px;
  font-size: 14px;
  background: #f7f7f7;
  width: 100%;
  height: calc(100% - 40px);
  display: flex;
  .left {
    .juese {
      height: calc(100% - 60px);
      overflow-y: auto;
    }
    margin-left: 10px;
    width: 20%;
    height: 100%;
    background: #ffffff;
    border-right: 1px solid #e1e1e1;
    border-radius: 3px;
    box-shadow: -1px 0px 3px 0px rgba(17, 14, 37, 0.05);
    .juesheshu {
      cursor: pointer;
      font-size: 14px;
      padding: 20px 0;
      padding-left: 38%;
      opacity: 0.7;
    }
    .ah3 {
      padding: 20px 0;
      border-left: 3px solid #3e7ef2;
      background: #ecf8ff;
      font-size: 18px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: bold;
      text-align: center;
      color: #666666;
      line-height: 22px;
      letter-spacing: 0px;
    }
    .dynamic_clacss {
      background: #3e7ef2;
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      color: #ffffff;
      line-height: 22px;
      letter-spacing: 0px;
    }
  }
  .right {
    margin-left: 20px;
    width: calc(80% - 60px);
    height: 100%;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      background: #ffffff;
      border-left: 3px solid #3e7ef2;
      height: 60px;
      .saixuna {
        display: flex;
        align-items: center;
        .select_bumen {
          width: 180px;
        }
        .input_renyuan {
          width: 180px;
        }
      }

      .btn {
        padding-right: 20px;
        .btn_anliu {
          margin-left: 10px;
        }
      }
    }
    .tables {
      display: flex;
      width: 100%;
      margin-top: 20px;
      height: calc(100% - 80px);
     ::v-deep .el-table {
        height: 100%;
        .cell {
          height: 46px;
          line-height: 45px;
        }
      }
      .renyuan_list {
        width: 40%;
        height: 100%;
      }
      .caidan_list {
        width: 100%;
        margin-left: 0px;
      }
    }
  }
}
</style>